<template>
  <div id="app">
    <!-- 1.子组件使用$emit触发事件并传递数据 -->
    <!-- 2.父组件用v-on注册(监听)子组件的事件,接受数据 -->

    <!-- @事件名和$emit()的第一参数名称保持一致 -->
    <message-son @sendEvent="getMsgFun"></message-son>
    <p>{{ fgetMsg }}</p>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
// 1.引入组件
import MessageSon from "./components/04/MessageSon.vue";
export default {
  name: "App",
  // 局部注册
  components: { MessageSon },
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      fgetMsg: "",
    };
  },
  methods: {
    getMsgFun(data) {
      console.log(data);
      this.fgetMsg = data;
    },
  },
};
</script>

<style>
</style>
